<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>event_animate</title>
<script src='../lib/jquery-2.1.1.js'></script>

<script>
$(document).ready(function(){
	$('#div1,#div2').css({
		'border':'5px ridge #ffddaa',
		'border-radius':'10px',
		'background-color': '#ddccaa',
		'width':'150px',
		'text-align':'center',
		'margin-bottom':'10px'
/* 		'white-space': 'nowrap',
		'overflow':'hidden',
		'text-overflow':'ellipsis' */
		
	});
	$('#div2').css({
		'position':'absolute',
		'cursor':'pointer'
		});
	$('#div1>li').css({

		'white-space': 'nowrap',
		'overflow':'hidden',
		'text-overflow':'ellipsis'
		
	});
	
	$('#btnAnimate').click(function(){

		$('#div1').animate({
			'width':'toggle',
/* 			'opacity':'toggle' */
			
		},2000);
		
	});
	var cnt=0;
	$('#btnAnimate2').click(function(){
		
	if(cnt==0){
		cnt=1;
		$('#div2').animate({
			'left': '200px',
			'height':'100px',
/* 			'border-radius':'100px'  */
		},1000);
		$('#div2').animate({
			'fontSize':'80px'
		});
	}else{
			cnt=0;
			$('#div2').animate({
				'fontSize':'20px'
			});
			$('#div2').animate({
				'left': '10px',
				'height':'22px',
/*  				'border-radius':'0px'  */
			},1000);
	
	}
	});

});
</script>
</head>
<body>
<input type='button' value='Animate' id='btnAnimate'>

<p/>

<div id='div1'>
	<li>바보</li>
	<li>멍청이송태진</li>
	<li>바나나</li>
	<li>복숭아</li>
	<li>수박</li>
	<li>토마토</li>
	<li>참외</li>
	<li>딸기</li>
	<li>포도</li>
</div>

<input type='button' value='Animation' id='btnAnimate2'>
<div id='div2'>uiux</div>
</body>
</html>